<template>
  <modal
    :name="modalName"
    @before-open="beforeOpen"
    :pivotY="0.2"
    :height="modalHeight"
    :width="modalWidth"
    ref="myModal"
    transition="nice-modal-fade">
    <!--模态框标题-->
    <div class="modal-title">
      <div class="modal-title-in">
        {{modalTitle}}
      </div>
    </div>
    <!--模态框内容-->
      <div class="modal-content">
        <div class="modal-content-in">
          <slot name="content"></slot>
        </div>
      </div>
    <!--模态框底部-->
    <div class="modal-footer">
      <div class="modal-footer-in">
        <slot name="footer">
          <el-button type="info" @click="closeModal">取消</el-button>
          <el-button type="primary" @click="submitData">确定</el-button>
        </slot>
      </div>
    </div>
  </modal>
</template>

<script>
  export default {
    name: "VueModal",
    data() {
      return {
        row: {}
      }
    },
    methods: {
      show(row) {
        this.row = row;
        if (row) {
          this.$modal.show(this.modalName, {rowData: row})
        } else {
          this.$modal.show(this.modalName)
        }
      },
      beforeOpen(event) {
        // this.setModalWidth(this.modalWidth);
        // console.log(event.params.rowData);
      },
      closeModal() {
        this.$modal.hide(this.modalName);
      },
      // 点击确认按钮调用的方法
      submitData() {
        // 调用父组件的submitData方法，把需要提交的数据传递给父组件
        this.$emit("submitData", this.row);
      }
    },
    props: {
      modalWidth: {
        type: String,
      },
      modalTitle: {
        type: String,
      },
      modalName: {
        type: String,
      },
      modalHeight: {
        type: String,
        default: 'auto'
      }
    },
  }
</script>

<style scoped>
  .modal-title {
    width: 100%;
    height: 60px;
  }
  .modal-title .modal-title-in {
    width: 95%;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
    border-bottom: 1px solid #eee;
    font-size: 24px;
  }
  .modal-content {
    width: 100%;
  }
  .modal-content .modal-content-in {
    width: 95%;
    margin: 0 auto;
    border-bottom: 1px solid #eee;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .modal-footer {
    width: 100%;
    height: 60px;
  }
  .modal-footer .modal-footer-in {
    width: 95%;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
    text-align: right;
  }
</style>